<template>
  <div>
     <div class="config">
        <div class="back" onclick="window.history.go(-1)"><img src="../assets/images/back.png" alt=""></div>
        <p>我的返佣与奖励</p>
    </div>
     <div class="box">
        <router-link to="/xFRebate">
              <div class="row">
                <img src="../assets/images/xiaofeifanyong.png" alt="" class="img">
                <p>消费返佣</p>
                <img src="../assets/images/gd.png" alt="" class="gengduo">
              </div>
        </router-link>
        <router-link to="/zSRebate">
              <div class="row">
                <img src="../assets/images/zhaoshangfanyong.png" alt="" class="img">
                <p>招商返佣</p>
                <img src="../assets/images/gd.png" alt="" class="gengduo">
              </div>
        </router-link>
           <router-link to="/teamZSReward">
              <div class="row">
                <img src="../assets/images/tuanduizhaoshang.png" alt="" class="img">
                <p>团队招商奖励</p>
                <img src="../assets/images/gd.png" alt="" class="gengduo">
              </div>
        </router-link>
           <router-link to="/teamXFReward">
              <div class="row">
                <img src="../assets/images/tuanduixiaofei.png" alt="" class="img">
                <p>团队消费奖励</p>
                <img src="../assets/images/gd.png" alt="" class="gengduo">
              </div>
        </router-link>

       
     </div>

      <!-- 底部tab -->
    <div class="tab">
      <ul>
          <router-link to="/personal">
          <li><img src="../assets/images/gerenzhongxin.png" alt="">
            <p>个人中心</p>
          </li>
        </router-link>
        <router-link to="/rakeBack">
          <li><img src="../assets/images/fanyong_.png" alt="">
            <p  class="active">返佣</p>
          </li>
        </router-link>
      
      </ul>
    </div>


  </div>
</template>

<script>
export default {
    name: "rakeBack",
    data() {
        return {};
    },
     beforeCreate() {
        document.getElementsByTagName("body")[0].style.background= "#5aa0c8";
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.box{
  margin-top: 50px;
}

.row {
    height: 50px;
    background: #fff;
    position: relative;
    border-bottom: 1px solid #f2f2f2;
    margin: 8px;
    border-radius: 3px;
}

.row .img {
    position: absolute;
    width: 22px;
    top: 13px;
    left: 8px;
}

.row .gengduo {
    position: absolute;
    height: 12px;
    top: 19px;
    right: 8px;
}

.row p {
    position: absolute;
    left: 40px;
    top: 15px;
    font-size: 14px;
}


/* 底部tab */

.tab {
    width: 100%;
    height:50px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    border-top: 1px solid #ddd;
    background: #fff;
}

.tab ul li {
    width: 50%;
    float: left;
    text-align: center;
}

.tab ul li img {
    width: 20px;
    padding-top: 5px;
    height: 25px;
}

.tab ul li p {
    font-size: 12px;
    color: #666;
}

.tab ul li p.active {
    color: #5aa0c8;
}
</style>
